iOS PWA improvments #89
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Explains why PiP and Fullscreen are disabled. *Needs translations
*Primarily adds a Widescreen button to replace a native iOS fullscreen feature. (Due to it being disabled now) Also available by holding shift and pressing the fullscreen button on desktop.
|
Fucking apple |
noname25495
added a commit
to noname25495/CineWhirl
that referenced
this pull request
Aug 18, 2024
Pasithea0
force-pushed
the
pwa-improvements
branch
from
2ef762b to
1e4ec0c
Compare
This reverts commit 1a36d96. Reverted due to it disabling pull to refresh on mobile :(
|
Revert "Disable scrolling in player" due to disabling mobile pull to refresh feature. |
ztpn
requested changes
Sep 17, 2024
|
|
||
| function IosPwaLimitations() { | ||
| const showAlert = () => { | ||
| alert( |
There was a problem hiding this comment.
Can't be using this
please do smth better like a modal that also is themed properly
| import { VideoPlayerButton } from "@/components/player/internals/Button"; | ||
|
|
||
| export function Widescreen() { | ||
| // Add widescreen status |
There was a problem hiding this comment.
Widescreen isn't a replacement/alternative to fullscreen
This also seems very unfinished
so we look into how add widescreen properly later
| @@ -20,6 +22,26 @@ export function PlayerPart(props: PlayerPartProps) { | |||
| const { isMobile } = useIsMobile(); | |||
| const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading); | |||
|
|
|||
| // Detect if running as a PWA on iOS | |||
| const isIOSPWA = | |||
There was a problem hiding this comment.
Just make this a separate hook in /hooks
| window.matchMedia("(display-mode: standalone)").matches; | ||
|
|
||
| // Detect if Shift key is being held | ||
| const [isShifting, setIsShifting] = useState(false); |
There was a problem hiding this comment.
this has to go since we aren't adding widescreen for now
| @@ -116,18 +138,41 @@ export function PlayerPart(props: PlayerPartProps) { | |||
| <Player.Settings /> | |||
| </> | |||
| ) : null} | |||
| <Player.Fullscreen /> | |||
| {/* Fullscreen on when not shifting */} | |||
| <Player.Fullscreen /> | ||
| {/* Disable for iOS PWA */} | ||
| {!isIOSPWA && ( | ||
| <div> |
There was a problem hiding this comment.
You can just do
{!isIOSPWA && (<Player.Fullscreen />)}| )} | ||
| {/* Add info for iOS PWA */} | ||
| {isIOSPWA && ( | ||
| <div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This aims to solve most of the problems with the iOS PWA.
Apple has restricted the use of many features for PWAs such as, not supporting Picture in Picture (PiP), breaking the functionality of the "standalone" display property, and always showing the home indicator on iPhone X and beyond.
Preview: https://pwa-improvements.envyflix.pages.dev/
Changes:
Disable PiP and Fullscreen for iOS PWA
Add info button for iOS PWA
Add Widescreen button
widescreen_sample-1.mov
Screen.Recording.2024-08-15.at.2.44.50.PM.mov
Fix top padding and safe areas for iOS PWA
BEFORE
AFTER
.pasithea(we require this for the contributor role)